.player-container {
  @apply m-0 relative select-none;
  @keyframes show {
    0% {
      @apply opacity-0;
    }
    50% {
      @apply opacity-50;
    }
    100% {
      @apply opacity-100;
    }
  }
  .player {
    @apply w-full h-full absolute top-0 left-0 bg-black z-1 object-contain;
  }
  .notLogin {
    @apply w-full h-full absolute top-0 left-0;
    z-index: 10;
  }
  .player-loading {
    @apply absolute left-2/4 top-2/4 z-4;
    transform: translate(-50%, -50%);
  }
  .p {
    @apply absolute left-2/4 top-2/4 z-2 whitespace-nowrap;
    transform: translate(-50%, -50%);
    font-family: Alibaba PuHuiTi 2;
    font-size: 22px;
    font-weight: normal;
    font-feature-settings: 'kern' on;
    background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  .playPause {
    @apply absolute z-3 left-2/4 top-2/4 cursor-pointer;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 767px) {
  .player-container {
    .p {
      @apply text-sm leading-6 text-center;
    }
    .playPause {
      @apply w-14 h-14;
    }
  }
}
